<template>
  <view class="c-cloud-course">
    <view class="c-cloud-course__photo">
      <image :src="info.course_app_cover" alt="" />
    </view>
    <view class="c-cloud-course__info">
      <view class="course-title">
        <text v-if="info.course_group_buy && groupTag" class="group-tag">拼团</text>
        <text v-if="info.subject_name_first" class="subject-tag">{{ info.subject_name_first }}</text>
        <text>{{ info.course_title }}</text>
      </view>
      <view class="lesson-num">{{ info.total_lesson_num }}课次</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'cloud-course',
  props: {
    info: {
      type: Object,
      default: () => {}
    },
    /* 拼团显示 */
    groupTag: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      imgSize: {
        width: 240,
        height: 134
      }
    }
  }
}
</script>

<style lang="scss">
.c-cloud-course {
  display: flex;
  background: #FFFFFF;
  padding: 32px 16px;
  &__photo {
    width: 240px;
    height: 134px;
    border-radius:8px;
    overflow: hidden;
    > img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  &__info {
    flex: 1;
    margin-left: 16px;
    position: relative;
    .lesson-num {
      position: absolute;
      bottom: 0px;
      left: 0;
      font-size: 24px;
      line-height: 34px;
      color: red;
    }
  }
}
</style>
